{% extends "director/index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}
<script src='{% static "js/table.pack.js" %}'></script>
<script src='{% static "js/ex_inputs.pack.js" %}'></script>

<script type="text/javascript">

    bus=new Vue()
    //	row_filters=
    //	placeholder =
    //	row_sort=
    //	heads=
    //	rows=
    //	row_pages =

    //	can_add=
    //	can_del=
    //	search_args=ex.parseSearch()
    //	search字段从 search_args._q 来取值

//    item_heads= heads
    heads={{ heads | jsonify }}

    $(function () {
        table=new Vue({
            el:'#there',
            data:{
//                parents:[],
//                par:'',
//                dirs:[],
//                items:[],
                crt_view:'',
//                crt_name:'',
//                selected:[],
//                cut_list:[],
//                root:{pk:null,name:'root'},
                cat_state:{}, // category state
            },
            mixins:[field_fun],
//            watch:{
//                'row_sort.sort_str':function (v) {
//                    this.search_args._sort=v
//                    this.search()
//                }
//            },
//            mounted:function(){
//                this.dir_data(this.root)
//                this.kw={heads:[],row:{}}
//
//            },
            computed:{
//                par_pk:function(){
//                    if(this.par){return this.par.pk}
//                    else{return null}
//                },
//                can_cut:function(){
////                    return this.$refs.
////                    if(this.selected.length>0 ){
////                        return true
////                    }
//                },
//                can_paste:function(){
//                    return this.cut_list.length>0
//                }

            },
            methods:{
                set_state:function(state){
                    for(var k in state){
                        Vue.set(this.cat_state,k,state[k])
                    }
                },
                on_dirclick:function(dir){
//                    this.kw.heads=dir_heads
                    this.kw.row=dir
                },
                item_save:function(){
                    var self=this
                    show_upload()
                    var post_data=[{fun:'save',row:this.kw.row}]
                    ex.post('/_ajax',JSON.stringify(post_data),function(resp){
                        if(resp.save.errors){
                            self.kw.errors=resp.save.errors
                        }else{
                            self.kw.errors={}
                        }
                        hide_upload(200)
                        self.$refs.catalog.dir_data()
                    })
                },


            },

        })
    })

</script>
<div id='there'>
    <path-nav :menu='menu' ></path-nav>
    <div class='btn-panel flex flex-sb' style="padding-left:20px; "></div>

    <div class="flex">
        <div class="index-panel">


            <com-catalog ref="catalog" url="/_department" :root="{pk:null,name:'公司'}" @dirclick="on_dirclick($event)"
                          @state_change="set_state($event)" :editable="can_edit">

                <template scope="dir_icon">
                    <i class="fa fa-user-circle " aria-hidden="true"></i>
                </template>

            </com-catalog>

        </div>
        <div class="flex-v">
            <div class="btn-toolbar" role="toolbar" aria-label="..." v-if="can_edit">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" @click="$refs.catalog.dir_create()">新建部门</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" :disabled="!cat_state.has_select" @click="$refs.catalog.item_del()">删除选中项</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" :disabled ="!cat_state.can_cut" @click="$refs.catalog.cut()">剪切</button>
                    <button type="button" class="btn btn-default" :disabled ="!cat_state.can_paste" @click="$refs.catalog.paste()">粘贴</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" @click="item_save()">保存修改</button>
                </div>
            </div>



            <div class='field-panel' v-if="kw.heads && kw.heads.length>0">
                <field  v-for='head in kw.heads' :key="head.name" :name='head.name' :kw='kw'></field>
            </div>

            <!--<paginator :nums='row_pages.options' :crt='row_pages.crt_page' @goto_page='goto_page($event)'></paginator>-->
        </div>
    </div>


</div>


<style type="text/css" media="screen" id="test">
    .index-panel{
        background-color: white;
        min-width: 300px;
    }
    .clickable:hover{
        cursor: pointer;
    }

</style>


{% block extra %}
{% endblock %}
{% endblock %}